<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-01 15:23:12
 * @description: 商品标题栏
 -->
<template>
  <view class="commodity-title-box">
    <!-- 会员日 -->
    <view v-if="goods.from_type === 101 && goods.end_time > goods.sys_time" class="timeOutBox black" :style="{'background-image': `url(${assetBg}/commodity/img_shop_black.png)`}">
      <view class="timeTitle">
        <view class="span">会员专享</view>
        <view class="goods-price">
          <view class="vPrice">
            ¥<view class="b">{{ topShowPrice | formatMoney }}</view>
          </view>
          <view class="nPrice">¥{{ bottomShowPrice | formatMoney }}</view>
          <view v-if="goods.volume" class="volume">销量{{ goods.volume }}</view>
        </view>
      </view>
      <view class="rightTimeOou">
        <view class="ttTimeout">距离结束</view>
        <view class="timeOut">
          <count-down color="white" splitor-color="white" :second="goods.end_time * 1 - goods.sys_time" :margin="0" :padding="0" />
        </view>
      </view>
    </view>
    <view v-else-if="(!waitSale && goods.sys_time && goods.sys_time < query.end_time * 1)" class="timeOutBox" :style="{'background-image': `url(${assetBg}/commodity/img_shop_countdown.png)`}">
      <view class="timeTitle">
        <view class="span">限时抢购</view>
        <view class="goods-price">
          <view class="vPrice">
            ¥<view class="b">{{ topShowPrice | formatMoney }}</view>
          </view>
          <view class="nPrice">¥{{ bottomShowPrice | formatMoney }}</view>
        </view>
      </view>
      <view class="rightTimeOou">
        <view class="ttTimeout">距结束仅剩</view>
        <view class="timeOut">
          <count-down color="white" splitor-color="white" :second="query.end_time * 1 - goods.sys_time" :margin="0" :padding="0" />
        </view>
      </view>
    </view>
    <template v-else>
      <view class="goods-price">
        <view class="price-box">
          <view class="vPrice">
            ¥
            <view v-if="goods.type === 4" class="b">
              {{ goods.ComboPriceMin | formatMoney }} - {{ goods.ComboPriceMax | formatMoney }}
            </view>
            <view v-else class="b">{{ topShowPrice | formatMoney }}</view>
          </view>
          <view class="zs-price-box" v-if="!groupBuy.availableGroupBuy">
            <text class="price">￥{{userInfo.current_member_card_type===3&&!isHiddenChairmanPrice?goods.director_price:goods.diamond_price| formatMoney}}</text>
            <view class="price-type">{{userInfo.current_member_card_type===3&&!isHiddenChairmanPrice?'董事价':'钻石价'}}</view>
          </view>
          <view v-if="goodsTab" class="fullcut-tag">{{ goodsTab }}</view>
        </view>
        <view class="sales">
          <text v-if="goods.volume">销量{{ goods.volume }}</text>
        </view>
      </view>
      <!-- 修改价格位置 -->
      <view class="yj-price" :class="{'none': query.bonus_gift_id || allData.series_type === 3 || commodityType === 'boxGoods'}">
        <view v-if="query.bonus_gift_id || allData.series_type === 3 || commodityType === 'boxGoods'">/单位</view>
        <view v-else><view v-if="goods.type !== 4">¥{{ bottomShowPrice | formatMoney }}</view></view>
      </view>
    </template>
    <!-- <view v-if="showToVip" class="toVipBox" :style="{'background-image': `url(${assetBg}/commodity/img_shop_tpvip.png)`}" @click="toVipPage">
      <view v-if="!goods.commission">升级<text class="strong1">VIP</text>会员，享受更多折扣</view>
      <view v-else>升级<text class="strong1">VIP</text>会员，本商品可享更多优惠</view>
      <view class="b">立即升级</view>
    </view> -->
    <!-- 开通钻石广告显示 -->
    <view class="recommend-box" v-if="!(userInfo.current_member_card_type>=2)&&(!groupBuy.availableGroupBuy)&&show_vip" @click="go_vip()">
      <view class="left">{{goods.discount_tips}}</view>
      <view class="right">
        <text class="name">立即升级</text>
        <url-image src="/static/images/member/detail/right.png" mode="aspectFit" width="13" height="24"/>
      </view>
    </view>
    <view class="commodity-title-column">
      <view class="mTitle" @click="handleCopy">{{ goods.title }}</view>
      <view class="sTitleBox">
        <view class="sTitle">
          <view class="tags" :class="{'theme': goods.type === 2 || goods.type === 4}">{{ setTag }}</view>
          <view class="span">{{ goods.subtitle }}</view>
        </view>
        <view v-if="showCollectButton || isGroupGoods" class="download-btn">
          <view v-if="false" class="btn-item">
            <b-image width="30" height="30" src="/static/images/commodity/icon_download_lit.png" />
            <view class="span">素材</view>
          </view>
          <view v-if="goods && showCollectButton" class="btn-item" @click="collectCommodity">
            <b-image width="30" height="30" :src="`/static/images/commodity/icon_collection_lit${isCollected ? '_selected' : ''}.png`" />
            <view class="span" :class="{ 'liked': isCollected }">收藏</view>
          </view>
          <view v-if="isGroupGoods" class="btn-item">
            <b-image width="30" height="30" src="/static/images/commodity/share_ico.png" />
            <view class="span">分享</view>
            <b-open-type v-if="token" open-type="share" @openTypeClick="shareClick" />
            <view v-else class="cover" @click="mentionLogin"></view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
import { getUserLevel } from '@/utils/common'
import CountDown from '@/components/count-down'
// import { getVipUrl } from '@/apis/Promotion'
// import { h5NavigateTo } from '@/utils/navigateTo'
import { setClipboardData } from '@/utils/tools'
export default {
  name: 'CommodityTitle',
  components: {
    CountDown
  },
  props: {
    allData: {
      type: Object,
      default: () => { return {} } // 商品
    },
    goods: {
      type: Object,
      required: true,
      default: null // 商品
    },
    groupBuy: {
      type: Object,
      default: () => { return {} } // 拼团信息
    },
    waitSale: {
      type: String,
      default: '' // 是否未开售
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    isBoxGoods: {
      type: Boolean,
      default() {
        return false
      }
    },
    isGroupGoods: {
      type: Boolean,
      default() {
        return false
      }
    },
    isBookmark: {
      type: Boolean,
      default() {
        return false
      }
    },
    goodsTab: {
      type: String,
      default: ''
    },
    commodityType: {
      type: String,
      default: ''
    }
  },
  inject: ['initShare'],
  data() {
    return {
      assetBg: Object.freeze(`${process.env.VUE_APP_IMAGE_ASSET}/images`),
      isCollected: false,
      availableGroupBuy: false,
			show_vip:false,
      // 设置是否显示董事价
      isHiddenChairmanPrice: uni.getStorageSync('isHiddenChairmanPrice')||false,
    }
  },
  computed: {
    ...mapGetters(['user']),
    // 商品标签
    setTag() {
      let tag = ''
      tag = this.goods.type === 2 ? '套餐' : this.goods.is_self === 1 ? '自营' : '商家'
      if (this.goods.type === 4) {
        tag = '套餐'
      }
      if (this.goods.from_type === 11) {
        tag = '自营'
      }
      return tag
    },
    showToVip() {
      if (this.groupBuy.availableGroupBuy === true) {
        return false
      }
      if (!this.token) {
        return true
      }
      const fromtype = this.goods.from_type * 1
      const type = this.goods.type * 1
      if (fromtype === 1 || fromtype === 2 || fromtype === 3 || type === 4) {
        if (!this.user || !this.userInfo || this.userInfo.current_member_card_type < 2) {
          return true
        }
      }
      // return false
    },
    showCollectButton() {
      let show = true
      if (this.isBoxGoods) {
        return false
      }
      const fromtype = this.goods.from_type * 1
      const type = this.goods.type * 1
      if (fromtype <= 300 && fromtype > 201) {
        return false
      }
      switch (fromtype) {
        case 1:
        case 3:// 拼团
          if (this.availableGroupBuy) {
            show = false
          } else {
            show = true
          }
          break
        case 9:
        case 13:
        case 14:
        case 18: // 签到商品
        case 19: // 签到赠品
        case 20: // 天降好礼
        case 22: // 399礼包
          show = false
          break
        default:
          break
      }
      switch (type) {
        case 4:
          show = false
          break
        default: ''
      }
      if (this.groupBuy.availableGroupBuy === true) {
        show = false
      }
      return show
    },
    topShowPrice() {
      if (!this.token) {
        return this.goods.vip_price;//vip价现在是销售价,region_price现在是vip价,后期逻辑有改记得改此备注
      }
      if (this.isBoxGoods) {
        return this.goods[getUserLevel()]
      } else {
        return this.goods.vip_price;//vip价现在是销售价,region_price现在是vip价,后期逻辑有改记得改此备注
      }
    },
    bottomShowPrice() {
      // return this.goods.from_type === 14 || this.goods.from_type === 22 ? '' : this.goods.price
      return this.goods.price
    },
    ...mapState([
      'token',
      'userInfo'
    ])
  },
  watch: {
    isBookmark() {
      this.isCollected = this.isBookmark
    }
  },
  async created() {
    this.isCollected = this.isBookmark;
		const res = await this.$api.homeApi.getHomeDetail({
		  hideLoading: true
		})
		if(res&&res.data&&res.data.menuList){
			for (let s of res.data.menuList) {
				if(s.name=='会员升级'){
					this.show_vip=true;
				}
			}
		}
  },
  methods: {
    go_vip(){
      if(this.token){
        this.$navigateTo('/pagesMember/pay/index?type=diamond')
      }else{
        this.$navigateTo('/pages/login/index')
      }
    },
    async collectCommodity() {
      this.$emit('collectCommodity', this.isCollected)
      let res = {}
      if (!this.isCollected) {
        res = await this.$api.mineApi.addBookmarks({ goods_id: this.goods.goods_id, goods_type: this.goods.type })
        if (!res.code) {
          this.$set(this, 'isCollected', true)
          uni.showToast({
            title: '收藏成功',
            icon: 'none',
            duration: 2 * 1000
          })
        }
      } else {
        res = await this.$api.mineApi.deleteBookmarks({ goods_id: this.goods.goods_id, goods_type: this.goods.type })
        if (!res.code) {
          this.$set(this, 'isCollected', false)
          uni.showToast({
            title: '取消收藏成功',
            icon: 'none',
            duration: 2 * 1000
          })
        }
      }
      // if (this.goodsType === 2) {
      //   this.collectSuitSensor('colloctionSuit', { is_collect: this.isCollected })
      // } else {
      //   this.collectGoodsSensor('colloctionCommodity', { is_collect: this.isCollected })
      // }
    },
    toVipPage() {
      // getVipUrl().then(res => {
      //   const info = res.data
      //   if (info.vip_link) {
      //     h5NavigateTo(info.vip_link)
      //   }
      // })
      this.$navigateTo('/pagesMember/vip/index', {})
      // this.$router.push('/vipPageV2')
      // window.__sensors__.track('receiveDiscount', {
      //   button_name: '立即开启',
      //   button_key: 'goods_detail_get_equity'
      // })
    },
    mentionLogin() {
      this.$navigateTo('/pages/login/index')
      return
    },
    handleCopy() {
      setClipboardData({
        data: this.goods.title
      })
    },
    shareClick() {
      this.initShare()
    }
  }
}
</script>
<style lang="scss" scoped>
.commodity-title-box {
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 180rpx;
  position: relative;
  z-index: 0;
  margin: -20rpx 0px 20rpx 0px;
  // border-radius:20rpx;
  align-items: left;
  .recommend-box{
    display: flex;
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/detail/vip-back.png') no-repeat;
    background-size: 100% 100%;
    height: 92rpx;
    // width: 694rpx;
    margin: 20rpx 20rpx 0rpx;
    align-items: center;
    color: #FED7B4;
    justify-content: space-between;
    font-size: 26rpx;
    padding: 0rpx 20rpx 0rpx 78rpx;
    .right{
      display: flex;
      align-items: center;
      .name{
        margin-right: 10rpx;
      }
    }
  }
  .commodity-title-column {
    padding: 20rpx;
    flex: 1;
    min-height: 120rpx;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .mTitle {
      @include text-ellipsis-line;
      color: $color-text;
      line-height: 44rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      font-size: $font-size-large;
    }
    .sTitleBox{
      display: flex;
      position: relative;
      justify-content: space-between;
      .sTitle {
        flex: 1;
        font-size: $font-size-small;
        .tags {
          color: #333;
          // background-color: $color-theme;
          display: inline-block;
          margin-right: 10rpx;
          border: 2rpx solid #666;
          padding: 0 10rpx;
          line-height: 36rpx;
          font-size: 24rpx;
          border-radius: 10rpx;
        }
        .theme{
          border: 2rpx solid #000;
          // color: $color-theme;
          color:#000;
          // background-color: #000;
        }
        .span {color: $color-text; display: inline;}
      }
      .download-btn{
        display: flex;
        flex: 0 0 50px;
        flex-direction: row-reverse;
        margin-top: -5px;
        right: 0px;
        .btn-item {
          height: 33px;
          margin-left: 10px;
          width: 40px;
          padding: 7px 0 0 0;
          background-color: #f9f9f9;
          border-radius: 50%;
          align-items: center;
          justify-content: center;
          text-align: center;
          position: relative;
          image {
            width: 15px;
            height: 15px;
            margin: 0 auto;
          }
          .cover {
            width: 33px;
            height: 40px;
            position: absolute;
            left:0;
            top:0;
            z-index: 20;
          }
          .span {
            display: block;
            line-height: 15px;
            font-size: 12px;
            transform: scale(.75) translateY(-40%);

            &.liked {
              color: $color-text;
            }
          }

        }
      }
    }
  }
  .rContainer {
    font-size: $font-size-small;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 70px;
    text-align: center;
    border-left: 1px solid $color-border;
    margin-left: 10px;
    image {
      width: 24px;
      padding: 2px;
      display: block;
    }
    .b {
      display: inline-block;
      font-weight: normal;
      color: $color-earn;
    }
  }
  .goods-price {
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    // align-items: center;
    align-items: baseline;
    @include j-between;
    position: relative;
    .vPrice {
      display: inline-block;
      font-size: $font-size-small;
      color: $color-price;
      margin-right: 10px;
      .b {font-size: 52rpx; font-weight: normal; display: inline-block; margin-left: 4rpx;}
    }
    .nPrice {
      display: inline-block;
      text-decoration: line-through;
      font-size: 13px;
      color: $color-tips;
      &.none {
        text-decoration: none;
      }
    }
    .volume {
      font-size: 13px;
      color: #fff;
      margin-left: 30rpx;
    }
    .sales {
      color: #999;
      font-size: 24rpx;
    }
    .price-box{
      display: flex;
      align-items: center;
      .zs-price-box{
        display: inline-block;
        .price{
          font-size: 28rpx;
        }
        .price-type{
          display: inline-block;
          background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/detail/zs-back.png') no-repeat;
          background-size: 100% 100%;
          padding: 0rpx 4rpx 0rpx 16rpx;
          font-size: 20rpx;
          color: #FED7B3;
          margin-left: 6rpx;
          position: relative;
          bottom: 2rpx;
        }
      }
    }
  }
  .yj-price{
    text-decoration: line-through;
    font-size: 26rpx;
    color: $color-tips;
    margin: 10rpx 0rpx 0rpx 20rpx;
    &.none {
      text-decoration: none;
    }
  }
  .toVipBox{
    height: 76rpx;
    margin: 0 20rpx;
    width: 710rpx;
    // background-image: url('~@/static/images/commodity/img_shop_tpvip.png');
    background-repeat: no-repeat;
    color: #000;
    padding: 4rpx 20rpx 0 62rpx;
    // padding: 0 3vw 0 8vw;
    font-size: 24rpx;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    align-items: center;
    .strong1 {
      font-weight: bold;
    }
    .strong{
      display: inline-block;
      font-weight: bold;
      color: #000;
      font-size: 32rpx;
    }
    .b{
      display: block;
      font-weight: normal;
      width:110rpx;
      height:38rpx;
      background:rgba(51,51,51,1);
      border:1rpx solid rgba(0,0,0,1);
      border-radius:20rpx;
      line-height: 38rpx;
      text-align: center;
      color: #DBC38E;
      font-size:20rpx;
      margin-top: 9rpx;
    }
  }
  .timeOutBox {
    height: 114rpx;
    width: 100%;
    padding-top: 16rpx;
    // background-image: url('~@/static/images/commodity/img_shop_countdown.png');
    background-repeat: no-repeat;
    color: white;
    font-size: 24rpx;
    background-size: 100% 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;

    .timeTitle {
      margin-left: 30rpx;
      .span{
        display: inline-block;
        vertical-align: bottom;
      }
      .goods-price{
        margin: 0;
        padding: 0;
        .vPrice{
          color: #fff;
        }
        .nPrice{
          color: #FFB0AA;
        }
      }
    }
     &.black {
      // background-image: url('~@/static/images/commodity/img_shop_black.png');
      .timeTitle {
         .nPrice{
          color: #fff;
        }
      }
    }
    .rightTimeOou{
      position: absolute;
      right: 30rpx;
      top: 16rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .ttTimeout{
        text-align: right;
        margin-bottom: 4rpx;
      }
    }
    .timeText {color: #fff;}
    .b {
      display: inline-block;
      font-weight: normal;
      font-size: 12px; // background-color: #2f0234;
    }
  }
  .fullcut-tag {
    display: inline-block;
    height:36rpx;
    background:rgba(226,21,54,1);
    border-radius:5rpx;
    line-height: 36rpx;
    text-align: center;
    font-size:20rpx;
    color:rgba(255,255,255,1);
    padding: 0 10rpx;
    margin-left: 20rpx;
    border-radius: 10rpx;
    position: relative;
  }
}
</style>
